<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件化</title>
</head>
<body>
<div id="app">
    <hello1></hello1>
</div>
<template id="hello">
    <div>
        <h1>{{msg}}</h1>
    </div>
</template>
<script src="../js/vue.js"></script>
<script>
    const hello1 = {
        data(){
            return {
                msg: 'hello 局部组件'
            }
        },
        template: '#hello'
    }
    //1.定义全局组件
    //参数1：定义组件名称 暂时不要使用驼峰
    //参数2：定义组件对象
    Vue.component('helloComponent',{
        //1.定义组件数据
        //必须有返回值  返回值是一个对象
        data(){
            return {
                msg: 'hello 组件'
            }
        },
        template: '#hello'
    })
    const app = new Vue({
        el: '#app',
        data: {

        },
        components: {
            hello1
        }
    })
</script>
</body>
</html>